import styled from 'styled-components';
import React, { CSSProperties, useState } from 'react';
import { Card, Button, Descriptions } from 'antd';
import { open, save } from '@tauri-apps/plugin-dialog';

import { ToolsHeader, CategoryList } from '../../../../components';
import { ConnectorDataSource, } from '../../../../services';
import { transformDomainExport } from '@/services/local';
import { homePath } from '@/utils';

export interface MetaDataExportPanelProps {
    style?: CSSProperties;
    domainIdentifier: string;
}

export const MetaDataExportPanel: React.FC<MetaDataExportPanelProps> = (props) => {

    const [loading, setLoading] = useState<boolean>(false);

    return (
        <Container style={props.style}>
            <StyledCard
                style={{
                }}
                title={'域导出'}
                styles={{
                    body: {
                        padding: '0px 2px'
                    }
                }}
            >
                <Top>
                    <Button
                        style={{
                            width: '120px'
                        }}
                        loading={loading}
                        type={'primary'}
                        onClick={async () => {
                            //
                            let file = await save({
                                title: '',
                                filters: [{
                                    name: 'zip',
                                    extensions: ['zip']
                                }],
                                canCreateDirectories: true
                            }) as any;

                            if (!file) {
                                return;
                            }
                            console.log(file);
                            setLoading(true);
                            try {
                                let home = await homePath();

                                let source: ConnectorDataSource = {
                                    id: 0,
                                    protocol: 'sqlite',
                                    url: `sqlite:${home}/rrg01.sqlite`,
                                    database_type: 'sqlite',
                                };

                                let res = await transformDomainExport(source, file, [{ domain_identifier: props.domainIdentifier }], {
                                    ignore_errs: true,
                                    file_options: {
                                        version: 'V1.0.0',
                                        format: 'sqlite'
                                    }
                                });
                                //提示导出成功
                            } catch (err) {
                                console.error(err);
                            }
                            setLoading(false);
                        }}
                    >导出</Button>
                </Top>
                <Result>
                    <Logger>
                        <Line>
                            
                        </Line>
                    </Logger>
                </Result>
            </StyledCard>
        </Container>
    );
}


const Container = styled.div`
    width: 100%;
    height: 100%;
    padding: 6px 6px;
    display: flex;
    overflow: hidden;
    gap: 10px;
`;

const StyledCard = styled(Card)`
    width: 100%;
`

const Top = styled.div`
    width: 100%;
    height: 120px;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
`;

const Result = styled.div`
    flex: 1;
    width: 100%;
    padding: 10px 10px;
    display: flex;
    gap: 10px;
`;


const Logger = styled.div`
    flex: 1;
    width: 400px;
    background-color: #FFFFFF;
    padding: 10px 10px;
    display: flex;
    gap: 10px;
`;

const Line = styled.div`
    font-size: 10px;
`;
